<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>添加学生信息</title>
  <style>
    .box {
      width: 400px;
      margin: 50px auto;
      padding: 10px;
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <div class="box">
    <h1>添加学生信息</h1>
    <form action="" funciton="post">
      <p> 班级：<input type="text" name="clazz" id="class"></p>
      <p>姓名：<input type="text" name="name" id="name"></p>
      <p>性别：<input type="radio" id="gender1" name="gender" value="男">
        <label for="gender1">男</label>
        <input type="radio" id="gender2" name="gender" value="女">
        <label for="gender2">女</label>
      </p>
      <p>年龄：<input type="text" name="age" id="age"></p>
      <p>
        爱好：<label><input type="checkbox" name="hobby" value="吃饭">吃饭</label>
        <label><input type="checkbox" name="hobby" value="睡觉">睡觉</label>
        <label><input type="checkbox" name="hobby" value="学习">学习</label>
      </p>
      <p>电话：<input type="text" name="tel" id="tel"> </p>
      <p>地址：<select name="address" id="address" s>
          <option value="郑州">郑州</option>
          <option value="洛阳" selected="true">洛阳</option>
          <option value="新乡">新乡</option>
        </select> </p>
      <p>备注：<textarea name="remark" id="remark" cols="30" rows="10"></textarea>
      </p>
      <p>入学时间： <input type="date" id="date" name="date"></p>
      保存清空：<input type="submit" id="submit" value="保存">
    </form>
  </div>
  <script src="./js/utils.js"></script>
  <script>
    var sub = document.querySelector('#submit')
    sub.addEventListener('click', function (e) {
      e.preventDefault()
      var form = document.querySelector('form')
      var data = serializeKeyValue(form)
      console.log(data);
      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function (e) {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            console.log('11111111');
            window.location.href = "index.html"
          }
        }

      }
      var url = 'http://localhost:3008/api/student/addstudent'
      xhr.open('POST', url)
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      xhr.send(data)
    })

  </script>
</body>

</html>